{{template "layout.html" .}}

{{define "content"}}
<div class="container-fluid">
    <!-- 页面标题和操作按钮 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2>脚本管理</h2>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadScriptModal">
                    <i class="fas fa-upload" aria-hidden="true"></i> 上传脚本
                </button>
            </div>
        </div>
    </div>

    <!-- 脚本列表 -->
    <div class="row">
        {{range .Scripts}}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card script-card" id="script-{{.ID}}">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">{{.Name}}</h5>
                    <span class="script-status" id="script-{{.ID}}-status">{{.Status}}</span>
                </div>
                <div class="card-body">
                    <p class="card-text">
                        <small class="text-muted">
                            <i class="fas fa-file-code" aria-hidden="true"></i> 主文件：{{.MainFile}}
                        </small>
                    </p>
                    <p class="card-text">
                        <small class="text-muted">
                            <i class="fas fa-box" aria-hidden="true"></i> 虚拟环境：{{if .Venv}}{{.Venv}}{{else}}无{{end}}
                        </small>
                    </p>
                    <p class="card-text">
                        <small class="text-muted">
                            <i class="fas fa-clock" aria-hidden="true"></i> 最后运行：{{if .LastRun}}{{.LastRun}}{{else}}从未运行{{end}}
                        </small>
                    </p>
                    <div class="btn-group w-100">
                        <button class="btn btn-success run-script" {{if eq .Status "Running"}}disabled{{end}} aria-label="运行脚本">
                            <i class="fas fa-play" aria-hidden="true"></i> 运行
                        </button>
                        <button class="btn btn-danger stop-script" {{if ne .Status "Running"}}disabled{{end}} aria-label="停止脚本">
                            <i class="fas fa-stop" aria-hidden="true"></i> 停止
                        </button>
                        <a href="/scripts/{{.ID}}/files" class="btn btn-primary" aria-label="编辑脚本">
                            <i class="fas fa-edit" aria-hidden="true"></i> 编辑
                        </a>
                        <div class="btn-group">
                            <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="更多操作">
                                <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="/scripts/{{.ID}}/download">
                                        <i class="fas fa-download" aria-hidden="true"></i> 下载
                                    </a>
                                </li>
                                <li>
                                    <button class="dropdown-item text-danger delete-script">
                                        <i class="fas fa-trash" aria-hidden="true"></i> 删除
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{else}}
        <div class="col-12">
            <div class="alert alert-info" role="alert">
                <i class="fas fa-info-circle" aria-hidden="true"></i> 暂无脚本，点击右上角按钮上传新脚本。
            </div>
        </div>
        {{end}}
    </div>
</div>

<!-- 上传脚本模态框 -->
<div class="modal fade" id="uploadScriptModal" tabindex="-1" aria-labelledby="uploadScriptModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadScriptModalLabel">上传新脚本</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="upload-script-form" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="script-name" class="form-label">脚本名称</label>
                        <input type="text" class="form-control" id="script-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="script-file" class="form-label">脚本文件</label>
                        <input type="file" class="form-control" id="script-file" name="file" accept=".py,.zip" required>
                        <div class="form-text">可以上传单个 .py 文件或包含多个文件的 .zip 压缩包</div>
                    </div>
                    <div class="mb-3">
                        <label for="script-venv" class="form-label">虚拟环境（可选）</label>
                        <select class="form-select" id="script-venv" name="venv">
                            <option value="">不使用虚拟环境</option>
                            {{range .availableVenvs}}
                            <option value="{{.ID}}">{{.Name}} (Python {{.Version}})</option>
                            {{end}}
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="submit" form="upload-script-form" class="btn btn-primary">上传</button>
            </div>
        </div>
    </div>
</div>

<!-- Toast 容器 -->
<div class="toast-container position-fixed bottom-0 end-0 p-3"></div>
{{end}}

{{define "scripts"}}
<script>
$(document).ready(function() {
    // 上传脚本
    $('#upload-script-form').submit(function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        
        $.ajax({
            url: '/scripts',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function() {
                $('#uploadScriptModal').modal('hide');
                showToast('脚本上传成功');
                location.reload();
            },
            error: function(xhr) {
                showToast('上传失败: ' + xhr.responseJSON.error);
            }
        });
    });

    // 运行脚本
    $('.run-script').click(function() {
        const scriptId = $(this).closest('.script-card').attr('id').split('-')[1];
        $.post(`/scripts/${scriptId}/run`)
            .done(function() {
                showToast('脚本已开始运行');
            })
            .fail(function(xhr) {
                showToast('运行失败: ' + xhr.responseJSON.error);
            });
    });

    // 停止脚本
    $('.stop-script').click(function() {
        const scriptId = $(this).closest('.script-card').attr('id').split('-')[1];
        $.post(`/scripts/${scriptId}/stop`)
            .done(function() {
                showToast('脚本已停止运行');
            })
            .fail(function(xhr) {
                showToast('停止失败: ' + xhr.responseJSON.error);
            });
    });

    // 删除脚本
    $('.delete-script').click(function() {
        const scriptCard = $(this).closest('.script-card');
        const scriptId = scriptCard.attr('id').split('-')[1];
        
        if (confirm('确定要删除这个脚本吗？此操作不可恢复。')) {
            $.ajax({
                url: `/scripts/${scriptId}`,
                type: 'DELETE',
                success: function() {
                    scriptCard.fadeOut(400, function() {
                        $(this).remove();
                        if ($('.script-card').length === 0) {
                            location.reload();
                        }
                    });
                    showToast('脚本已删除');
                },
                error: function(xhr) {
                    showToast('删除失败: ' + xhr.responseJSON.error);
                }
            });
        }
    });
});
</script>
{{end}} 